<template>
  <div id="Lang" class="mt-2">
    <!--        select-->
    <div class="overflow-hidden rounded-3xl px-5 lg:mx-auto lg:w-[500px] lg:px-10 lg:py-36 py-10 pb-5">
      <!--          lg:bg-[#2a3032]-->
      <p class="mb-8 text-[#8e8f90] lg:text-sm lg:text-white">{{ $mt('Select your Language and Currency') }}</p>
      <!--      <div class="mb-8 flex w-full items-center justify-between rounded-3xl bg-[#282c2d87] px-5 py-3.5 lg:bg-[#353b3c]">-->
      <!--        <van-icon class="mr-4 w-[8%]" size="24px" name="location" color="#949696" />-->
      <!--        <div class="flex w-[92%] items-center justify-between">-->
      <!--          <p class="mr-3 text-sm font-semibold">{{ $mt('MALAYSIA') }}</p>-->
      <!--          <y-image class="h-6 w-8 rounded-xl object-cover" src="home-imgs/ch-qizi.png" width="32" height="24" />-->
      <!--        </div>-->
      <!--      </div>-->

      <div
        class="border-anime mb-3 flex w-full items-center justify-between rounded-3xl bg-[#282c2d87] px-5 py-1 lg:mb-4 lg:bg-[#353b3c]">
        <div class="mr-5 h-auto shrink-0">
          <WImage class="w-8 h-8" :src="useAsset('lang-change.png')" />
        </div>
        <select
          class="cursor-pointer w-full text-white bg-[#2528290a] border-0 px-0 text-xs focus:outline-0"
          v-model="langVal">
          <option class="text-xs text-black" v-for="(item, index) in langList" :value="item.value" :key="index">
            {{ item.label }}
          </option>
        </select>
      </div>

      <div
        class="border-anime mb-5 flex w-full items-center justify-between rounded-3xl bg-[#282c2d87] px-5 py-1 lg:mb-4 lg:bg-[#353b3c]">
        <div class="mr-5 h-auto shrink-0">
          <WImage class="w-8 h-8" :src="useAsset('curreny.png')" />
        </div>
        <select
          class="cursor-pointer bg-[#2528290a] text-white focus:outline-0 w-[92%] border-0 px-0 text-xs"
          v-model="currencyVal">
          <option class="text-xs text-black" :value="item.id" v-for="(item, index) in currencyList" :key="index">
            {{ item.name }} ({{ item.symbol }})
          </option>
        </select>
      </div>
      <button
        name="button"
        @click="submitHandle"
        class="flex w-full items-center cursor-pointer justify-center rounded-3xl bg-gradient-to-r from-red1 to-[#cd4e4e] py-3.5 lg:py-4">
        <span class="text-xs font-semibold">{{ $mt('SAVE SETTINGS') }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import { useMetaStore } from '~/store/meta'
useSeoMeta({ title: 'Select your Language and Currency | BitTopup' })
const route = useRoute()
const metaStore = useMetaStore()
const { $forceReplaceRoute, $localePath } = useCommonPlugin()
useHead({
  link() {
    return [{ rel: 'canonical', href: `https://bittopup.com/common/lang` }]
  },
})
const { curCurrency, currencyList } = storeToRefs(metaStore)
const langCookie = useCookie('i18n_redirected', { path: '/', default: () => 'en', maxAge: 60 * 60 * 24 * 30 })
const langVal = ref()
watchEffect(() => (langVal.value = langCookie.value))
const currencyVal = ref()
watchEffect(() => (currencyVal.value = curCurrency.value.id))
watch(
  () => langVal.value,
  () => metaStore.initCurrency(langVal.value),
)
const {
  public: { LANGUAGES: langList },
} = useRuntimeConfig()
const submitHandle = async () => {
  langCookie.value = langVal.value
  metaStore.setCurCurrencyId(currencyVal.value)
  const loadingToast = showLoadingToast({ forbidClick: true })
  await new Promise((resolve) => setTimeout(resolve, 500))
  loadingToast.close()
  $forceReplaceRoute($localePath(route.query.redirectTo ? route.query.redirectTo : '/', langVal.value))
}
</script>

<style scoped lang="scss">
#Lang {
  background: url('assets/images/map.svg') no-repeat center/100% auto;
}
.border-anime {
  @apply border-[2px] border-transparent duration-200 focus-within:border-red1 focus-within:shadow-md focus-within:shadow-[rgba(255,0,0,0.4)];
}
</style>
